<template>
    <div class="a0">
    <!-- <div class="bubbles">
        <span v-for="item in items" style="{{item}}"></span>
    </div> -->
        <div class="a1">

            <div class="register-login">
                <el-tabs v-model="activeTab" @tab-click="handleClick">
                    <el-tab-pane label="注册" name="register">
                        <el-form ref="registerForm" :model="registerForm" label-width="80px"
                            @submit.native.prevent="register">
                            <el-form-item label="用户名" prop="account">
                                <el-input v-model="registerForm.account"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="pwd">
                                <el-input type="password" v-model="registerForm.pwd"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" prop="code">
                                <div class="flex">
                                    <el-input v-model="registerForm.code"></el-input>
                                    <el-button class="but1" type="primary" v-if="countdown > 0">{{ countdown
                                        }}秒</el-button>
                                    <el-button class="but1" type="primary" @click="sendRegistCode"
                                        v-else>验证码</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="register">注册</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="登录" name="login">
                        <el-form ref="loginForm" :model="loginForm" label-width="80px" @submit.native.prevent="login">
                            <el-form-item label="用户名" prop="account">
                                <el-input v-model="loginForm.account"></el-input>
                            </el-form-item>
                            <el-form-item label="密 码" prop="pwd">
                                <el-input type="password" v-model="loginForm.pwd"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="login">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!-- <div class="a2">
            <iframe :src="src" frameborder="0" style="width: 100%;height: 100%"></iframe>
        </div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            countdown: 0,
            activeTab: "login",
            registerForm: {
                account: "",
                pwd: "",
                code: "",
            },
            loginForm: {
                account: "",
                pwd: "",
            },
            src: '',
        };
    },
    methods: {
        sendRegistCode() {
            let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            if (reg.test(this.registerForm.account)) { // 邮箱校验
                let param = {
                    email: this.registerForm.account
                }
                this.$axios.post('http://localhost:8080/user/registCode', param,
                    {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => {
                        console.log('response', response);
                        if (response.data.errorMsg) {
                            this.$message.error(response.data.errorMsg);
                        } else {
                            this.$message.success('发送成功');
                            if (this.countdown === 0) {
                                this.countdown = 60;
                                const timer = setInterval(() => {
                                    this.countdown--;
                                    if (this.countdown === 0) {
                                        clearInterval(timer);
                                    }
                                }, 1000);
                            }
                        }
                    })
                    .catch(error => {
                        console.log('error', error);
                    });
            } else {
                this.$message.error('请填写正确邮箱');
            }

        },
        handleClick(tab, event) {
            console.log('handleClick', tab, event);
        },
        register() {
            let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            console.log('reg.test(this.registerForm.account)',reg.test(this.registerForm.account));
            if (!reg.test(this.registerForm.account)) {
                this.$message.error('请输入正确邮箱');
                return false;
            } else if (this.registerForm.pwd == null||this.registerForm.pwd == '') {
                this.$message.error('请输入密码');
                return false;
            } else if (this.registerForm.code == null||this.registerForm.code == '') {
                this.$message.error('请输入验证码');
                return false;
            }
            console.log("注册信息：", this.registerForm);
            // 在这里添加注册逻辑
            this.$axios.post('http://localhost:8080/user/reg', this.registerForm,
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    console.log('response', response);
                    if (response.data.errorMsg) {
                        this.$message.error(response.data.errorMsg);
                    } else {
                        this.$message.success('注册成功');
                        this.$router.push('/data1');
                    }
                })
                .catch(error => {
                    console.log('error', error);
                });
        },
        login() {
            console.log("登录信息：", this.loginForm);
            let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            console.log('reg.test(this.loginForm.account)',reg.test(this.loginForm.account));
            if (!reg.test(this.loginForm.account)) {
                this.$message.error('请输入正确用户名');
                return false;
            } else if (this.loginForm.pwd == null||this.loginForm.pwd == '') {
                this.$message.error('请输入密码');
                return false;
            }
            // 在这里添加登录逻辑
            this.$axios.post('http://localhost:8080/user/login', this.loginForm,
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    console.log('response', response);
                    if (response.data.errorMsg) {
                        this.$message.error(response.data.errorMsg);
                    } else {
                        this.$message.success('登陆成功');
                        this.$router.push('/data1');
                        // 设置缓存
                        localStorage.setItem('token', response.data.success.id);
                        // localStorage.removeItem('token'); // 删除缓存
                        console.log(localStorage.getItem('token')); //读取缓存
                    }
                })
                .catch(error => {
                    console.log('error', error);
                });
        },
    },
    mounted: function () {
        if (localStorage.getItem('token') != null) {
            this.$router.replace('/data1');
        }
    },
};
</script>

<style scoped>
.but1 {
    widows: 20%;
    margin-left: 10px;
}

.flex {
    display: flex;
}

.a1 {
    width: 300px;
    margin: 0 auto;
    padding: 50px;
    border: solid 1px rgb(214, 212, 212);
    border-radius: 5px;
    background: linear-gradient(to right, #beeff0, #d7e291);
    /* 设置渐变背景色 */
}

.register-login {
    width: 300px;
    margin: 0 auto;
}
</style>